<template>
  <div class="page-main">
    <query-page
      v-model:selectedKeys="selectedKeys"
      title="人员物料关系查询"
      :form-component-config="formComponentConfig"
      :form-render-config="formRenderConfig"
      :form-render-keys="formRenderKeys"
      :table-component-config="tableComponentConfig"
      :table-render-config="tableRenderConfig"
      :table-render-keys="tableRenderKeys"
      :loading="isLoading"
      :data="renderData"
      :total="totalNum"
      @selection-change="selectionChange"
      @query-data="getData"
    >
      <template #operate="{ record, rowIndex }">
        <div>
          <a-button type="text" @click="showConsole(record, rowIndex)"
            >编辑</a-button
          >
          <a-button type="text" @click="showConsole(record, rowIndex)"
            >详情</a-button
          >
        </div>
      </template>
    </query-page>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import queryPage from '@/common/components/query-page/index.vue';
  import {
    formComponentConfig,
    formRenderConfig,
    formRenderKeys,
  } from '@/views/basic-configuration/personnel-material-query/baseform';
  import {
    tableRenderConfig,
    tableComponentConfig,
    tableRenderKeys,
  } from '@/views/basic-configuration/personnel-material-query/personcoume';
  import { queryrywlAPICglist } from '@/api/Basimanagementapi/categorymanagement';

  const isLoading = ref(true);
  const renderData = ref<any[]>([]);
  const selectedKeys = ref(['id-1']);

  const totalNum = ref(0);

  const getData = async (queryInfo: object) => {
    renderData.value = [];
    isLoading.value = true;
    console.log(queryInfo);

    const { data } = await queryrywlAPICglist(queryInfo);

    console.log(data, '========data');
    renderData.value = data?.list;
    totalNum.value = data?.total;
    console.log(renderData.value, '===============renderData');
    isLoading.value = !data?.list;
  };

  const showConsole = (rowData: object, index: number) => {
    console.log('rowData', rowData);
    console.log('index', index);
  };
  const selectionChange = (val: string[]) => {
    console.log('selectedKeys', val);
  };
</script>

<style lang="less" scoped>
  .page-con {
    height: 100%;
    background-color: #fff;
  }

  .table-header {
    height: 40px;
    line-height: 40px;
  }

  .table-side {
    width: 200px;
    height: 100%;
    margin-right: 20px;
    background-color: #00fff0;
  }

  .supbox {
    width: 100%;
    padding: 14px;
    background-color: white;
    border-radius: 6px;
  }
</style>
